import React, { Component } from "react";
import './index.css'

export default class Item extends Component {
    state = {
        // 是否悬浮
        isHover: false
    }
    // 选择完成
    handleDone = (id) => {
        return (e) => {
            // 通知父组件去修改done
            this.props.doneTodo(id)
        }
    }
    // 处理hover
    hoverFun = (flag) => {
        return (e) => {
            this.setState({isHover: flag})
        }
    }
    handleDelete = (id) => {
        return (e) => {
            this.props.deleteTodo(id)
        }
    }
    render() {
        const {id, name, done} = this.props
        const {isHover} = this.state
        return (
            <li 
                className={`todo-item clearfix ${isHover ? 'active' : ''}`} 
                onMouseEnter={this.hoverFun(true)} 
                onMouseLeave={this.hoverFun(false)}
            >
                <div className='todo-info'>
                    <input 
                        type='checkbox' 
                        checked={done} 
                        onChange={this.handleDone(id)}
                    ></input>
                    <span>{name}</span>
                </div>
                <div className="todo-action" style={{display: isHover ? 'block' : 'none'}}>
                    <button onClick={this.handleDelete(id)}>删除</button>
                </div>
            </li>
        )
    }
}